<template>
  <div>
    <div class="nav">
      <div class="width-box">
        <div class="margin-box">
          <router-link tag="div" to="/findMusic/recommend" active-class="findmusic-isactive">推荐</router-link>
          <router-link tag="div" to="/findMusic/ranking" active-class="findmusic-isactive">排行榜</router-link>
          <router-link tag="div" to="/findMusic/songList?msg=全部风格" active-class="findmusic-isactive">歌单</router-link>
          <router-link tag="div" to="/findMusic/hostStation" active-class="findmusic-isactive">主播电台</router-link>
          <router-link tag="div" to="/findMusic/singer" active-class="findmusic-isactive">歌手</router-link>
          <router-link tag="div" to="/findMusic/newDisc?msg=全部风格" active-class="findmusic-isactive">新碟上架</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "findMusic"
};
</script>

<style lang="scss" scoped>
.nav {
  height: 35px;
  background-color: #c20c0c;
  border-bottom: 1px solid #a40011;
  .width-box {
    width: 1100px;
    height: 35px;
    margin: 0 auto;
    .margin-box {
      padding-left: 180px;
      margin: 0 auto;
      height: 35px;

      display: flex;
      align-items: center;
      & > div {
        border-radius: 50px;
        padding: 0 13px;
        cursor: pointer;
        font-size: 12px;
        color: #fff;
        margin: 0 17px;
        height: 20px;
      }
      & > div:hover {
        background: #9b0909;
      }
      .findmusic-isactive {
        background: #9b0909;
      }
    }
  }
}
</style>